<template>
  <div :class="prefixCls" :style="getStyle" v-if="showFooter || $slots.footer">
    <template v-if="!$slots.footer">
      <slot name="insertFooter"></slot>
      <a-button
        v-bind="cancelButtonProps"
        @click="handleClose"
        class="mr-2"
        v-if="showCancelBtn"
      >
        <BasicIcon icon="ant-design:close-outlined" />
        {{ cancelText || "关闭" }}
      </a-button>
      <slot name="centerFooter"></slot>
      <a-button
        :type="okType"
        @click="handleOk"
        v-bind="okButtonProps"
        class="mr-2"
        :loading="confirmLoading"
        v-if="showOkBtn"
      >
        <BasicIcon icon="ant-design:check-outlined" />
        {{ okText || "确认" }}
      </a-button>
      <slot name="appendFooter"></slot>
    </template>

    <template v-else>
      <slot name="footer"></slot>
    </template>
  </div>
</template>
<script lang="ts">
import type { CSSProperties } from "vue";
import { defineComponent, computed } from "vue";
import { useDesign } from "$/hooks/web/useDesign";
import { BasicIcon } from "$/components/Icon";

import { footerProps } from "../props";
export default defineComponent({
  name: "BasicDrawerFooter",
  components: { BasicIcon },
  props: {
    ...footerProps,
    height: {
      type: String,
      default: "60px",
    },
  },
  emits: ["ok", "close"],
  setup(props, { emit }) {
    const { prefixCls } = useDesign("basic-drawer-footer");

    const getStyle = computed((): CSSProperties => {
      const heightStr = `${props.height}`;
      return {
        height: heightStr,
        lineHeight: heightStr,
      };
    });

    function handleOk() {
      emit("ok");
    }

    function handleClose() {
      emit("close");
    }
    return { prefixCls, getStyle, handleOk, handleClose };
  },
});
</script>

<style lang="less">
@prefix-cls: ~"vben-basic-drawer-footer";
@footer-height: 60px;
.@{prefix-cls} {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 12px 0 20px;
  text-align: right;
  background-color: @component-background;
  border-top: 1px solid @border-color-base;
  z-index: 100; // 设置下，否则 BasicTable 空白图标会覆盖 actions 上边框线

  > * {
    margin-right: 8px;
  }
}
</style>
